<template>
  <Component :is="component" :dataId="dataId" :viewId="viewId"/>
</template>

<script setup>
import {defineAsyncComponent, getCurrentInstance, onMounted, shallowRef, unref, watch} from 'vue';
import {useRoute} from 'vue-router';
import FormListViewHelper from '@/views/platwork/FormListView/FormListViewHelper';
import {isEmpty} from '@/utils/CommonUtils';

defineOptions({
  name: 'FormDetailView'
})

const internalInstance = getCurrentInstance();
const global = internalInstance.appContext.config.globalProperties;
const route = useRoute();
const loading = shallowRef(false);
const appMenu = shallowRef({
  appMenu: undefined,
  formMenu: undefined,
  formDefinition: undefined,
});
const component = shallowRef(undefined);
const dataId = shallowRef(undefined);
const viewId = shallowRef(undefined);

onMounted(() => {
  loadMenu();
});

function loadMenu() {
  let menuId = route.query.appMenuId;
  let helper = new FormListViewHelper({menuId, loading});
  helper.loadMenuById().then(data => {
    if (isEmpty(data)) return;
    appMenu.value = data;
  });
}

watch([appMenu], () => {
  component.value = defineAsyncComponent(() => import('@/' + appMenu.value.formMenu.detailPageComponent));
  dataId.value = route.query.dataId;
  viewId.value = appMenu.value.formMenu.detailPcViewId;
});

</script>